<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="jquery-3.1.1.js">
        
    </script>
    <style>
    body{
        background-color: lightcyan;
    }
        table{
            width: 600px;
            height: 50px;
            background-color: black;
            margin: 0 auto;
            color: white;
            text-align: center;
            opacity: 0.4;
        }
        
        div{
            width: 600px;
            margin: 0 auto;
            position: relative;
            display: flex;
            justify-content: space-between;
        }
        ul{
            margin: 0;
            display: none;
            list-style: none;
            width: 120px;
            background-color: #FFF;
        }
        li{
            margin: 30px 10px;
        }
        a{
            text-decoration: none;
            color:gray;
        }
        a:hover{
            border-bottom: 1px solid gray;
        }
       
       td>a{
            color:white;
            text-decoration: none;
        }
        td>a:hover{
            border-bottom: 1px solid orangered;
            color:orangered;
        }
    </style>
</head>
<body>
    <table>
    <tr>
        <td><a href="">公司简介</a></td>
        <td><a href="">产品介绍</a></td>
        <td><a href="">联系我们</a></td>
        <td><a href="">人才招聘</a></td>
    </tr>
    </table>
    <div>
    <ul>
        <li><a href="">概况介绍</a></li>
        <li><a href="">发展历史</a></li>
        <li><a href="">公司实力</a></li>
        
    </ul>
    <ul>
          <li><a href="">软件研发</a></li>
            <li><a href="">软件教育</a></li>
            <li><a href="">天使投资</a></li>
                
    </ul>
    <ul>
        <li><a href="">公司地址</a></li>
        <li><a href="">联系方式</a></li>
        <li><a href="">投资加盟</a></li>
    </ul>
    <ul>
         <li><a href="">ios招聘</a></li>
        <li><a href="">html5招聘</a></li>
        <li><a href="">php招聘</a></li>
    </ul>
    </div>
</body>
</html>
<script>
    $('td').each(function(index){
        
        $(this).mouseover(function(){
            var num = $(this).index();
            // $(this).css('color','orange');
            $($('ul')[num]).css('display','block').siblings().css('display','none');
            $('ul')[num].style.marginLeft = 150*num +'px';
        })
    })
</script>